﻿@page "/components/swipearea"

<DocsPage>
    <DocsPageHeader Title="Swipe area">
        <Description>Note: these examples only works on devices where touch events are supported.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Swipe directions</Title>
                <Description>Swipe your finger in different direction to see how the component works.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <SwipeDirectionsExample />
            </SectionContent>
            <SectionSource Code="SwipeDirectionsExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Usage: open and close drawer</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <SwipeDrawerExample />
            </SectionContent>
            <SectionSource Code="SwipeDrawerExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Usage: navigate a date picker</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <SwipeDatePickerExample />
            </SectionContent>
            <SectionSource Code="SwipeDatePickerExample" GitHubFolderName="Tree" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
